<template>
    <Swiper></Swiper>
    <div class="quick">
        <QuickEntrance v-for="item in quick1Info" :key="item.id" :image="item.image" :text="item.text"
            :backColor="item.backColor" :btnColor="item.btnColor" :btnImg="item.btnImg"></QuickEntrance>
    </div>
    <Bestselling class="bast" :title="bestesellingInfo.title">
        <Shelves :baseters="bestesellingInfo.baseters" />
    </Bestselling>
    <div class="quick">
        <QuickEntrance v-for="item in quick2Info" :key="item.id" :image="item.image" :text="item.text"
            :backColor="item.backColor" :btnColor="item.btnColor" :btnImg="item.btnImg"></QuickEntrance>
    </div>
    <div class="card">
        <div class="left">
            <div>
                <div>秀匠VIP会员招募</div>
                <div>注册VIP会员，权益享不停</div>
                <div>
                    <el-button round>查看详情</el-button>

                </div>
            </div>
        </div>
        <div class="right">
            <el-image style="width: 100%;"
                src="https://www.showjane.com/public/upload/ad/2023/04-13/c99b8cb231f929b813a8fc5ce06b9e21.jpg" />

        </div>
    </div>
    <Bestselling class="bast" :title="inspirationInfo.title">
        <Inspiration :images="inspirationInfo.data" />
    </Bestselling>
    <Bestselling class="bast" :title="moreInfo.title" :moreBtn="false">
        <More :images="moreInfo.data" />
    </Bestselling>

    <div class="card2">
        <div class="left">
            <div>
                <div>秀江商店实例，<br />欢迎光临</div>
                <div>
                    <div>
                        <el-button round>
                            江苏实例
                            <el-icon class="el-icon--right">
                                <ArrowDownBold />
                            </el-icon>
                        </el-button>
                    </div>
                    <div>
                        <el-button text="plain"> 
                        <span> 查看更多</span>
                            <el-icon class="el-icon--right">
                                <ArrowRight />
                            </el-icon>
                        </el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="right">
            <el-image style="width: 820px;"
                src="https://www.showjane.com/public/upload/ad/2023/03-18/7109308bcaf4a8b8f9b2853e6daa152e.jpg" />
        </div>
    </div>

    <Preferences class="preferences"  :data="preferencesInfo.data" />


    

</template>


<script setup>
import { onMounted, ref } from 'vue'
import { getStore } from '../../apis/apis'
import { ArrowDownBold, ArrowRight ,ArrowUpBold} from '@element-plus/icons-vue'

const quick1Info = ref({})
const quick2Info = ref({})
const bestesellingInfo = ref({})
const inspirationInfo = ref({})
const moreInfo = ref({})
const preferencesInfo = ref({})
onMounted(async () => {
    let { quick1, quick2, besteselling, inspiration, more ,preferences} = await getStore()
    quick1Info.value = quick1
    quick2Info.value = quick2
    bestesellingInfo.value = besteselling
    inspirationInfo.value = inspiration
    moreInfo.value = more
    preferencesInfo.value = preferences
    console.log(preferencesInfo.value);
})



</script>

<style scoped lang="scss">
.quick,
.bast,
.card,
.card2 ,.preferences {
    width: 1300px;

}

.quick {
    margin: 100px auto 20px;
    display: flex;
    justify-content: space-between;
}

.bast {
    margin: 0 auto;
    margin-top: 80px;
}

.card {
    height: 460px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    margin: 140px auto 78px;

    & .left {
        background-color: #017DC7;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;

        &>div {
            width: 330px;
            height: 188px;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            color: #fff;

            &>:nth-child(1) {
                font-weight: bold;
                font-size: 28px
            }

            &>:nth-child(2) {
                font-size: 14px;
                flex: 1;
                padding-top: 30px;
            }

            &>:nth-child(3) {
                & .el-button {
                    width: 120px;
                    height: 40px;
                }
            }
        }
    }

    & .right {
        width: 820px
    }
}

.card2 {
    height: 460px;
    margin: 140px auto 40px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    & .left {
        background-color: #329DAC;
        flex: 1;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        &>div{
            width: 320px;
            height: 172px;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            color: #fff;
            transform: translateY(-40px);
            &>:nth-child(1) {
                font-weight: bold;
                font-size: 28px
            }
            &>:nth-child(2){
                font-size: 14px;
                display: flex;
                justify-content: space-between;
                & >:nth-child(1){
                    & .el-button{
                        width: 120px;
                        height: 40px;
                        color: #000;
                        position: relative;
                    }
                   
                }
                & >:nth-child(2){
                    & .el-button{
                        color: #fff;
                        position: relative;
                    }
                    & .el-button:hover{
                        color: #ffffff48;
                        background-color: transparent;
                    }
                    & .el-button::after{
                        content: '';
                        position: absolute;
                        width: 80%;
                        border-bottom: 3px solid #fff;
                        bottom: 0;
                    }
                }

            }
        }

    }

    & .right {}
}
.preferences{
    margin: 0 auto;
}

.goTop{
    position: fixed;
    bottom: 100px;
    right: 50px;
}
</style>